<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Property Editor</title>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="easyui/demo/demo.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="js/o2mation.js"></script>

    <script type="text/javascript">
        var componentId;
        var dataMap;
        function requestComponent(id){
            componentId = id;
            requestLoadComponent(id, 1, function(data, status){
                if(status == 200){
                    var jsoncontent = JSON.parse(data);
                    console.log(jsoncontent)
                    var objArray = new Array();
                    dataMap = new Array();
                    for(i in jsoncontent.properties){
                        var obj = encodeToJQueryDataGrid(jsoncontent.name, 
                                                         jsoncontent.properties[i]);
                        if(obj != undefined){
                            objArray.push(obj);
                            dataMap.push({'id': jsoncontent.id, 'data': obj});
                        }
                    }
                    var comps = jsoncontent['components'];
                    for(i in comps){
                        var comp = comps[i];
                        for(j in comp.properties){
                            var obj = encodeToJQueryDataGrid(comp.name, comp.properties[j])

                            if(obj != undefined){
                                objArray.push(obj);
                                dataMap.push({'id': comp.id, 'data': obj});
                            }
                        }
                    }
                    $('#pg').propertygrid('loadData', objArray);
                }
            });
        }
    
        function refresh(){
            requestComponent(componentId);
        }

        function save(){
            var rows = $("#pg").propertygrid("getRows"); 
            var data = new Array()
            for(var i=0;i<rows.length;i++){
                var local = dataMap[i];
                var id = local.id;
                local = local.data;
                var value;
                if( local.editor.type == 'combobox' ){
                    for(j in local.editor.options.data){
                        var obj = local.editor.options.data[j];
                        if(rows[i].value == obj['text']){
                            value = obj['value'];
                            break;
                        }   
                    }
                } else
                    value = rows[i].value;
                console.log(local.editor.type )
                console.log(value + ':' + rows[i].value)
                data[i] = {'id': id, 'name':rows[i].id, 'value':value}
            }
            console.log(data);
            var http = new XMLHttpRequest();
            var url = '/properties';
            http.onreadystatechange = function(){
                if(http.readyState == 4 && http.status == 200){
                    
                } else {

                }
            }
            http.open("POST", url);
            http.setRequestHeader('content-type', 'application/json');
            http.send(JSON.stringify(data));
        }

        function main(){

        }
    </script>
</head>
<body onload = "main()">
    <h1>Property Editor</h1>
    <table id="pg" class="easyui-propertygrid" style="width:70%" data-options="
                showGroup:true,
                columns:[[
                    {field:'name',title:'Name',width:100,sortable:true},
                    {field:'value',title:'Value',width:200,sortable:true} 
                ]],
                scrollbarSize:0
            ">
    </table> 
    <div style="margin:20px 0;"></div> 
    <button onclick="save()" style="width:100px;">Save</button>  
    <button onclick="refresh()" style="width:100px;">Refresh</button>
</body>
</html>